<template>
<div class="main_box" v-loading="loading">
  <el-table
      @row-click="go"
      :data="tableData"
      style="width: 100%">
    <el-table-column
        prop="title"
        label="通知公告"
        min-width="800">
    </el-table-column>
    <el-table-column
        prop="time"
        min-width="139">
    </el-table-column>
  </el-table>

  <el-pagination
      class="button"
      background
      :current-page.sync="curPage"
      layout="prev, pager, next"
      :total="allPage"
      @current-change="hCurrentChange">
  </el-pagination>
</div>
</template>

<script>
export default {
  name: "announcement",
  data() {
    return{
      tableData: [],
      curPage: 1,  //当前页数
      allPage: 1,  //总页数
      loading: true
    }
  },
  methods:{
    go(row){
      window.sessionStorage.setItem('TextID',row.id);
      this.$router.push('/information/announcementArticles')
    },
    async hCurrentChange(curPage){
      this.loading = true;
      const data2 = {};
      data2.classification = '通知公告';
      data2.pages = curPage;
      data2.number = '20';
      const eventDynamics = await this.$api.getAriticle(data2);//data2
      this.tableData = eventDynamics.data.page.records;
      this.allPage = eventDynamics.data.page.pages;
      this.loading = false;
    },
    //  获取公告和赛事动态
    async GetAriticle2(){
      this.loading = true;
      const data2 = {};
      data2.classification = '通知公告';
      data2.pages =  this.curPage;
      data2.number = '20';
      const eventDynamics = await this.$api.getAriticle(data2);//data2
      this.tableData = eventDynamics.data.page.records;
      this.allPage = eventDynamics.data.page.pages;
      this.loading = false;
    },
  },
  mounted() {
    this.GetAriticle2();
  }
}
</script>

<style lang="less" scoped>
.main_box{
  height: 880px;
  background-color: #ffffff;
  margin: 0 40px;
  padding: 20px 50px;

  //分页
  .button{
    margin-top: 40px;
    display: flex;
    justify-content: center;
  }
  //分页

}
</style>
